<template>
    <div>
        <div class="index-wrap">
            <el-row :gutter="20">
                <el-col :xl="4" :md="4" :sm="6" v-show="this.$store.getters.loginUser.roles[0].roleId !== 2">
                    <div class="grid-content bg-EF7A76">
                        <div class="grid-title"><i class="el-icon-s-custom mr10"></i>累计代理</div>
                        <div class="grid-text">
                            {{this.agentCount || 0}}
                        </div>
                    </div>
                </el-col>
                <el-col :xl="4" :md="4" :sm="6">
                    <div class="grid-content bg-4A92F1">
                        <div class="grid-title"><i class="el-icon-s-opportunity mr10"></i>累计客户</div>
                        <div class="grid-text">
                            {{ this.customerCount || 0 }}
                        </div>
                    </div>
                </el-col>
                <el-col :xl="4" :md="4" :sm="6" v-show="this.$store.getters.loginUser.roles[0].roleId !== 2">
                    <div class="grid-content bg-51A660">
                        <div class="grid-title"><i class="el-icon-s-claim mr10"></i>累计合约</div>
                        <div class="grid-text">
                            {{ this.contractCount || 0 }}
                        </div>
                    </div>
                </el-col>
                <el-col :xl="4" :md="4" :sm="6">
                    <div class="grid-content bg-B76DDB">
                        <div class="grid-title"><i class="el-icon-tickets mr10"></i>累计收益</div>
                        <div class="grid-text">
                            {{ this.income || 0 }}
                        </div>
                    </div>
                </el-col>
                <el-col :xl="4" :md="4" :sm="6">
                    <div class="grid-content bg-7BDAFB">
                        <div class="grid-title"><i class="el-icon-reading mr10"></i>累计待结算</div>
                        <div class="grid-text">
                            {{ this.undoIncome || 0 }}
                        </div>
                    </div>
                </el-col>
                <el-col :xl="4" :md="4" :sm="6">
                    <div class="grid-content bg-F3A33A">
                        <div class="grid-title"><i class="el-icon-data-analysis mr10"></i>累计已结算</div>
                        <div class="grid-text">
                            {{ this.doneIncome || 0 }}
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="grid-box">
            <el-table :data="tableData" border size="large">
                <el-table-column prop="dateStr" label="日期" align="center" />
                <el-table-column prop="agentCount" label="代理" align="center" v-if="this.$store.getters.loginUser.roles[0].roleId !== 2"/>
                <el-table-column prop="customerCount" label="客户" align="center" />
                <el-table-column prop="contractCount" label="合约" align="center" v-if="this.$store.getters.loginUser.roles[0].roleId !== 2"/>
                <el-table-column prop="income" label="收益" align="center" />
                <el-table-column prop="undoIncome" label="待结算" align="center" />
                <el-table-column prop="doneIncome" label="已结算" align="center" />
            </el-table>
        </div>
    </div>

</template>

<script>
import { bsSuperCount } from "@/api/indexGroup/indexSuperAdmin";
export default {
    name: "indexDashboard",
    data() {
        return {
            // 遮罩层
            loading: false,
            // 累计代理
            agentCount: undefined,
            // 累计客户
            customerCount: undefined,
            // 累计合约
            contractCount: undefined,
            // 累计收益
            income: undefined,
            // 累计待结算
            undoIncome: undefined,
            // 累计已结算
            doneIncome: undefined,
            // 表格
            tableData: [],
        }
    },
    created() {
        console.log(this.$store.getters.loginUser.roles[0].roleId !== 2, "==========")
        this.getIndexSuperAdmin();
    },
    methods: {
        /**
         * 查询收益数据
         */
        getIndexSuperAdmin() {
            this.loading = true;
            let query = {};
            bsSuperCount(query).then(response => {
                console.log(response.data)
                this.agentCount = response.data.total.agentCount;
                this.customerCount = response.data.total.customerCount;
                this.contractCount = response.data.total.contractCount;
                this.income = response.data.total.income;
                this.undoIncome = response.data.total.undoIncome;
                this.doneIncome = response.data.total.doneIncome;
                this.tableData.push(response.data.today);
                this.tableData.push(response.data.yestoday);
                this.tableData.push(response.data.beforeyestoday);
                this.tableData.push(response.data.month);
                this.tableData.push(response.data.preMonth);
                this.tableData.push(response.data.total);
                this.loading = false;
            })
        }
    }
}
</script>

<style scoped lang="scss">
.grid-box {
    padding: 20px;
}
.grid-title {
    font-size: 13px;
    cursor: pointer;
}
.index-wrap {
    padding: 20px;
}
.grid-content {
    padding: 10px;
    height: 150px;
    color: #ffffff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    .grid-text {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}
.bg-EF7A76 {
    background: #EF7A76;
}
.bg-4A92F1 {
    background: #4A92F1;
}
.bg-51A660 {
    background: #51A660;
}
.bg-B76DDB {
    background: #B76DDB;
}
.bg-7BDAFB {
    background: #7BDAFB;
}
.bg-F3A33A {
    background: #F3A33A;
}
</style>
